<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>watch</title>
</head>
<body>
  <h1>watch:监听：当数据变化时作出响应</h1>
  <div id="app">
    <input type="text" v-model="age">
    <hr>
    <input type="text" v-model="yanzhi">
    <button @click="beautiful">变美</button>
    <hr>
    <input type="text" v-model="person.age">
    <input type="text" v-model="arr1[0].age">
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        age: '18',
        yanzhi: 95,
        person: {
          name: 'Jack',
          age: 20
        },
        arr1: [
          {name: 'jack', age: 18}
        ]
      },
      // 侦听器
      watch: {
        // 监听age
        age(newVal, oldVal) {
          console.log(newVal, oldVal);
          console.log('恭喜！按时长大');
        },
        // 监听yanzhi
        yanzhi() {
          console.log('又变美了！');
          this.getBF()
        },
        // 监听person这个对象
        // 也可以写成person.age，这样就是监听person的age属性
        'person.age':{
          // 深监听
          deep: true,
          // 回调函数,当被监听的值变化时就会调用
          handler:function(newVal, oldVal) {
            console.log(newVal*1, oldVal);
            console.log('生日快乐');
          }
        },
        // 'arr1[0].age': {
        //   deep: true,
        //   handler: function() {
        //     console.log(444);
        //   }
        // }
      },
      methods: {
        beautiful() {
          this.yanzhi = 100
        },
        getBF() {
          console.log('TFBoys 在向你招手');
          this.weibo();
        },
        weibo() {
          console.log('微博崩了');
        }
      },
    })
  </script>
</body>
</html>